<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../tf-graph-board/tf-graph-board.html">
<link rel="import" href="../../tf-graph-loader/tf-graph-loader.html">
<link rel="import" href="../../tf-graph/tf-graph-controls.html">
<!-- Element for tf-graph demo page

Example

<tf-graph-demo></tf-graph-demo>

-->

<dom-module id="tf-graph-demo">
<template>
<style>

:host /deep/ {
  font-family: 'Roboto', sans-serif;
}

.main {
  position: absolute;
  right: 0;
  left: 250px;
  height: 100%;
}

.side {
  position: absolute;
  left: 0;
  width: 250px;
  height: 100%;
  border: 1px solid black;
  box-sizing: border-box;
}

.all {
  position: relative;
  width: 100%;
  height: 100%
}

</style>
<div class="all">
  <div class="side">
    <tf-graph-controls
        color-by-params="[[colorByParams]]"
        has-stats="[[hasStats]]"
        color-by="{{colorBy}}"
        datasets="[[datasets]]",
        selected-dataset="{{selectedDataset}}"
        selected-file="{{selectedFile}}"
    ></tf-graph-controls>
    <tf-graph-loader id="loader"
        datasets="[[datasets]]",
        selected-dataset="[[selectedDataset]]"
        selected-file="[[selectedFile]]"
        out-graph-hierarchy="{{graphHierarchy}}"
        out-graph="{{graph}}"
        out-graph-name="{{graphName}}"
        has-stats="{{hasStats}}"
        progress="{{_progress}}"
        out-hierarchy-params="{{_hierarchyParams}}"
    ></tf-graph-loader>
  </div>
  <div class="main">
    <tf-graph-board id="graphboard"
        graph-hierarchy="[[graphHierarchy]]"
        graph="[[graph]]"
        has-stats="[[hasStats]]"
        graph-name="[[graphName]]"
        progress="[[_progress]]"
        color-by="[[colorBy]]"
        color-by-params="{{colorByParams}}"
        hierarchy-params="[[_hierarchyParams]]"
    ></tf-graph-board>
  </div>
</div>
</template>
</dom-module>

<script>
(function(){

var datasets = [
  {
    name: "Mnist Eval",
    path: "mnist_eval.pbtxt",
  },
  {
    name: "Mnist Train (with stats)",
    path: "mnist_train.pbtxt",
    statsPath: "mnist_train_stats.json"
  },
  {
    name: "Mnist Train (with shapes)",
    path: "mnist_train_shapes.pbtxt",
  },
  {
    name: "Inception Train (huge)",
    path: "inception_train.pbtxt",
  },
  {
    name: "Inception Train Eval",
    path: "inception_train_eval.pbtxt",
  },
  {
    name: "Inception Test",
    path: "inception_test_eval.pbtxt",
  },
  {
    name: "PTB Word LSTM Train",
    path: "ptb_word_lstm_train.pbtxt",
  },
  {
    name: "PTB Word LSTM Train Eval",
    path: "ptb_word_lstm_train_eval.pbtxt",
  },
  {
    name: "PTB Word LSTM Test",
    path: "ptb_word_lstm_test_eval.pbtxt",
  },
  {
    name: "Cifar10 Train (with shapes)",
    path: "cifar10_train.pbtxt",
  },
  {
    name: "Cifar10 Multi-GPU Train",
    path: "cifar10_multi_gpu_train.pbtxt",
  },
  {
    name: "Cifar10 Eval",
    path: "cifar10_eval.pbtxt",
  },
  {
    name: "Fatcat LSTM",
    path: "fatcat_lstm.pbtxt",
  },
  {
    name: "Legacy Inception Renamed",
    path: "legacy_inception_renamed.pbtxt",
  },
  {
    name: "Wolfe (Broken)",
    path: "wolfe1.pbtxt",
  },
  {
    name: "Wolfe (Fixed)",
    path: "wolfe2.pbtxt",
  },
  {
    name: "AlexNet",
    path: "alexnet.pbtxt",
  },
  {
    name: "TestError404",
    path: "nofile"
  }
];

Polymer({
  is: 'tf-graph-demo',
  properties: {
    hasStats: Boolean,
    datasets: {
      type: Object,
      value: function() {
        return this._getDatasets();
      }
    },
    selectedDataset: {
      type: Number,
      value: 9 // Cifar train with shapes.
    },
    _progress: Object
  },
  _getDatasets: function() {
    if(typeof DEMO_DIR_PREFIX === 'undefined') {
      DEMO_DIR_PREFIX = '';
    }
    return _.map(datasets, function(dataset) {
      var result = {
        name: dataset.name,
        path: this.resolveUrl('tf_model_zoo/' + dataset.path).replace("tf_model_zoo", DEMO_DIR_PREFIX + 'tf_model_zoo')
      };
      if (dataset.statsPath != null) {
        result.statsPath = this.resolveUrl('tf_model_zoo/' + dataset.statsPath).replace("tf_model_zoo", DEMO_DIR_PREFIX + 'tf_model_zoo');
      }
      return result;
    }, this);
  }
});
})();
</script>
